<template>
	<div class="header-box">
		<div class="header">
			<div id="home-absolute" @click="clickJia"></div>
			<div class="header-left">
				<img :src="headerData.main_img_url" class="touxiang">
			</div>
			<div class="header-content">消息</div>
			<div class="header-right">
				<span class="iconfont jiahao" @click="clickJia">&#xeb8f;</span>
			</div>
			<div class="header-fixed" v-show="disp">
				<ul>
					<li><span class="iconfont">&#xeb90;</span><span>创建群聊</span></li>
					<li><span class="iconfont">&#xe69d;</span><span>创建群聊</span></li>
					<li><span class="iconfont">&#xe607;</span><span>创建群聊</span></li>
					<li><span class="iconfont">&#xe609;</span><span>创建群聊</span></li>
					<li><span class="iconfont">&#xeb8f;</span><span>创建群聊</span></li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name:'HomeHeader',
		props:{
			headerData:Object
		},
		data(){
			return{
				disp:false,
			}
		},
		
		methods:{
			clickJia(){
				this.disp=!this.disp;
				let oDiv=document.getElementById('home-absolute')
				if(this.disp){
				oDiv.style.width=document.documentElement.clientWidth+'px'
				oDiv.style.height=document.documentElement.clientHeight+'px'
			}else{
				oDiv.style.width=0+'px'
				oDiv.style.height=0+'px'
			}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.style'
.header-box
	height:1.1rem
	.header
		height:1.1rem
		background:$bgColor
		width:100%
		text-align:center
		line-height:1.1rem
		color:#fff
		font-size:17px
		display:flex
		position: fixed
		top:0
		#home-absolute
			background:rgba(0,0,0,0.2);
			position: absolute;
			z-index: 1;
		.header-left
			margin-left:.2rem
			width:10%
			.touxiang
				width:100%
				border-radius:50%
		.header-content
			width:80%
		.header-right
			margin-right:.3rem
			.jiahao
				font-size:22px
		.header-fixed
			position:fixed
			width:45%
			height:300px;
			background:#fff;
			color:#000;
			top:60px;
			right:10px;
			border-radius:10px;
			z-index:99
			ul
				li
					height:20%
					.iconfont
						padding-right: 20px;
						font-size: 20px;
</style>
